<template>
  <div v-loading="loading" class="attachment-list-wrap">
    <div class="attachment-list-btn">
      <el-button size="small" type="primary" class="diff-btn" @click="toDiff">对比差异</el-button>
    </div>
    <el-timeline v-if="list && list.length">
      <template v-for="(item, index) in list">
        <el-timeline-item :key="item.id" :class="timelineItemClass(item.source)" class="node-item">
          <slot name="attachmentItem">
            <attachmentItem
              :item="item"
              :contract-id="contractId"
              :is-latest="index === 0"
              @refresh="getContractAttachmentList(contractId)"
              @deleteAttachment="getContractAttachmentList(contractId)"
            />
            <div v-if="item.downloadList && item.downloadList.length" class="attachment-download-list">
              <div v-for="it in item.downloadList" :key="it.contractAttachmentRecordId" class="download-list-item">
                <!-- <div><CheckUserInfo :user-id="it.userId" class="user-info">{{ it.username }}</CheckUserInfo>，下载了合同附件</div> -->
                <!-- <div class="flex-1"><CheckUserInfo :user-id="it.userId" class="user-info">{{ it.username }}</CheckUserInfo>，下载了{{ it.name || '合同附件' }}</div> -->
                <div class="download-name">
                  <CheckUserInfo :user-id="it.userId" class="user-info">{{ it.username }}</CheckUserInfo>，
                  <ToolTip :content="`下载了${it.name?it.name:'合同附件'}`" />
                </div>
                <div>{{ it.time | format('YYYY/MM/DD HH:mm:ss') }}</div>
              </div>
            </div>
          </slot>
        </el-timeline-item>
      </template>
    </el-timeline>
    <empty-placeholder v-else style="height: 400px;" />
  </div>
</template>

<script>
import { getContractAttachmentList, getAttachmentDiffList } from '@/api/legal';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import attachmentItem from '@/components/Common/auditProcess/module/attachmentItem';
import { format } from '@/filters/date';
export default {
  components: { EmptyPlaceholder, attachmentItem },
  filters: {
    format
  },
  props: {
    contractId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      list: [],
      left: '',
      loading: false,
      wordList: [],
      selectedIds: []
    };
  },
  created() {
    this.getContractAttachmentList(this.contractId);
    // this.initBtnPosition();
  },
  methods: {
    initBtnPosition() {
      const list = document.querySelectorAll('.progress-type-btn');
      this.left = (list.length - 1) * 96 + 4 + 'px';
    },
    timelineItemClass(source) {
      const map = ['contract-node', 'audit-node', 'comment-node'];
      return map[source];
    },
    handleIsSelected(item) {
      const uid = item.items[0].uid;
      return this.selectedIds.includes(uid);
    },
    getContractAttachmentList(id) {
      this.loading = true;
      getContractAttachmentList(id).then(res => {
        if (res.code === 200) {
          this.list = res.data;
          this.getAttachmentDiffList(id);
          this.loading = false;
        }
      }).catch(err => {
        this.loading = false;
        console.error(err.message);
      });
    },
    getAttachmentDiffList(id) {
      getAttachmentDiffList(id).then(res => {
        if (res.code === 200) {
          this.wordList = res.data;
        }
      }).catch(err => console.error(err.message));
    },
    toDiff() {
      if (this.wordList.length < 2) {
        this.$message.warning('仅当存在两份及以上word格式文档时，才可以进行对比');
        return;
      }
      this.$router.push({
        name: 'contractDiff',
        params: {
          id: this.contractId
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.attachment-list-wrap {
  .attachment-list-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    margin-right: -5px;
    background-color: #FAFBFF;
    z-index: 2;
  }
  .diff-btn {
    background-color: #fff;
    color: #406EFF;
    border-color: #406EFF;
    font-size: 12px;
    padding: 5px 10px;
  }
  &::v-deep {
    .el-timeline {
      padding-left: 0;
      .el-timeline-item:last-child {
        .el-timeline-item__tail{
          display: none !important;
        }
      }
    }
    .el-timeline-item__wrapper {
      padding-left: 18px;
    }
  }
  .contract-node {
    &::v-deep {
      .el-timeline-item__node {
        border: 5px solid #31CC9C;
      }
    }
  }
  .audit-node {
    &::v-deep {
      .el-timeline-item__node {
        border: 5px solid #FD8546;
      }
    }
  }
  .comment-node {
    &::v-deep {
      .el-timeline-item__node {
        border: 5px solid #406EFF;
      }
    }
  }
  .node-item {
    cursor: pointer;
    left: 4px;
    padding-bottom: 4px;
    &::v-deep {
      .el-timeline-item__node {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        margin-top: 12px;
        background-color: #fff;
      }
      .el-timeline-item__node--normal {
        left: -3px;
      }
      .el-timeline-item__tail {
        margin-top: 12px;
        left: 4px;
      }
    }
  }
  .attachment-download-list {
    cursor: auto;
    max-height: 65px;
    overflow-y: auto;
    padding: 4px 12px 0;
    @include scrollBar($x: hidden, $y: auto, $width: 6px);
    .download-list-item {
      color: #999;
      display: flex;
      font-size: 12px !important;
      justify-content: space-between;
      &:not(:last-child) {
        margin-bottom: 4px;
      }
      .download-name {
        max-width: 53%;
        display: flex;
        .user-info {
          white-space: nowrap;
          cursor: pointer;
        }
      }
      @media screen and (max-width: 1280px) {
        .download-name {
          max-width: 46%;
        }
      }
    }
  }
}
</style>
